<!-- 数据滑块功能，并支持选项卡切换并展示对应内容 -->
<template>
	<view class="tab-page-linkage">
		<uni-status-bar v-if="statusBarShow"></uni-status-bar>
		<!-- 滑块文字 -->
		<view class="flex">
			<view class="left-icon" v-if="headLeftIcon" :style="{ background: BoxBackground }"><uni-icons v-if="headLeftIcon" :type="headLeftIcon" size="38"></uni-icons></view>
			<slot v-else name="l-icon"></slot>
			<view class="tabsStyl" :style="[style]">
				<tabs-swiper
					ref="tabSwiper"
					:bar-height="barHeight"
					:duration="300"
					:bar-style="barStyle"
					:active-color="activeColor"
					:list="list"
					:is-scroll="isScroll"
					:font-size="fontSize"
					:current="current"
					:bold="bold"
					:offset="offset"
					:bg-color="BoxBackground"
					:inactive-color="inactiveColor"
					:active-item-style="activeItemStyle"
					:barWidth="barWidth"
					:barHeight="barHeight"
					:box-padding="BoxPadding"
					:background-bar="backgroundBar"
					@change="change"
				></tabs-swiper>
			</view>
			<view class="left-icon left-icon-r" v-if="headRightIcon" :style="{ background: BoxBackground }">
				<uni-icons v-if="headRightIcon" :type="headRightIcon" size="38" @click="_callback"></uni-icons>
			</view>
			<slot v-else name="r-icon"></slot>
		</view>
		<!-- 滑块 -->
		<MyLine v-if="showLine" :height="lineHeight" :background="lineBackground"></MyLine>
		<slot></slot>
		<!-- 滑到哪块显示哪块内容 -->
		<swiper
			ref="swiperPage"
			class="swiper-page"
			style="flex: 1; max-height: 100%; width: 750rpx;"
			:duration="300"
			:current="swiperCurrent"
			@animationfinish="animationfinish"
			@transition="transition"
		>
		<!-- #ifdef APP-PLUS -->  
			<template v-for="(item, index) of new Array(list.length)">
				<!-- 每个都通过插槽插入自定义内容 -->
				<swiper-item style="height: 100%; max-height: 100%;" :key="index" ><slot :name="'swiper-item-' + (index+1)"></slot></swiper-item>
			</template>
		<!-- #endif -->  
		<!-- #ifndef APP-PLUS -->  
		<block v-for="(item, index) of list.length">
			<swiper-item style="height: 100%; max-height: 100%;" :key="index" ><slot name="swiper-item-{{index+1}}"></slot></swiper-item>
		</block>
		<!-- #endif -->  
		
		</swiper>
	</view>
</template>

<script>
import TabsSwiper from './u-tabs-swiper/custom-tabs-swiper.vue';

export default {
	components: {
		TabsSwiper
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		backgroundBar: {
			type: String,
			// default: 'linear-gradient(to right, rgb(254, 147, 103), rgb(253, 197, 71))'
			default:'#FE9367'
		},
		statusBarShow: {
			type: Boolean,
			default: false
		},
		statusBarShowR: {
			type: Boolean,
			default: false
		},
		headLeftIcon: {
			type: String,
			default: ''
		},
		headRightIcon: {
			type: String,
			default: ''
		},
		headIconShow: {
			type: Boolean,
			default: false
		},
		tabWidth: {
			type: [String, Number],
			default: '100%'
		},
		inactiveColor: {
			type: String,
			default: '#333'
		},
		activeColor: {
			type: String,
			default: '#333'
		},
		fontSize: {
			type: [String, Number],
			default: 30
		},
		isScroll: {
			type: Boolean,
			default: false
		},
		showLine: {
			type: Boolean,
			default: true
		},
		lineHeight: {
			type: [String, Number],
			default: 1
		},
		lineBackground: {
			type: String,
			default: '#f8f8f8'
		},
		activeItemStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		bold: {
			type: Boolean,
			default: false
		},
		offset: {
			type: Array,
			default: () => {
				return [5, 20];
			}
		},
		// 菜单底部移动的bar的宽度，单位rpx
		barWidth: {
			type: [Number, String],
			default: 40
		},
		// 移动bar的高度
		barHeight: {
			type: [Number, String],
			default: 10
		},
		barStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		BoxBackground: {
			type: String,
			default: '#fff'
		},
		BoxPadding: {
			type: Array,
			default: () => {
				return [0, 0];
			}
		}
	},
	computed: {
		listTwo() {
			return this.list.length;
		},
		style() {
			return {
				width: this.tabWidth.lastIndexOf('%') >= 0 ? this.tabWidth : this.tabWidth + 'rpx',
				background: this.BoxBackground
			};
		}
	},
	data() {
		return {
			scrollTop: 0,
			current: 0,
			swiperCurrent: 0,
			triggered: false,
			freshing: 0,
			changePageShow: true,
			freshingShow: true
		};
	},
	watch: {
		list() {
			this.swiperCurrent = this.current = 0;
			setTimeout(() => {
				this.$refs.tabSwiper.init();
			}, 100);
		},
		current() {
			this.$emit('changePage', this.current);
		}
	},
	methods: {
		changeCurrent(e){
			this.swiperCurrent = e
			console.log(e)
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		// 滚动每一步的回调
		transition(msg) {
			this.$refs.tabSwiper.setDx(msg.detail.dx);
		},
		// 全屏滚动结束
		animationfinish(msg) {
			this.$refs.tabSwiper.setFinishCurrent(msg.detail.current);
			this.swiperCurrent = msg.detail.current;
			this.current = msg.detail.current;
		},
		_callback() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-page-linkage {
	flex: 1;
	display: flex;
	width: 100%;
	flex-direction: column;
	max-height: 100vh;
	min-height: 0rpx;
	height: 100%;

	.left-icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		height: 100%;
		min-height: 80rpx;
		width: 160rpx;
		padding-left: 28rpx;
	}

	.left-icon-r {
		align-items: flex-end;
		padding: 0rpx;
		padding-right: 28rpx;
	}

	.tabsStyl {
		flex: 1;
		min-width: 0rpx;
		margin: 0 auto;
	}

	.loading-view {
		text-align: center;
		padding-bottom: 20rpx;
	}
}
</style>
